<template>
  <div class="card content-box">
    <span class="text">按钮权限 🍓🍇🍈🍉</span>
    <el-alert
      class="mb20"
      :title="`当前用户按钮权限：${JSON.stringify(Object.keys(BUTTONS))}`"
      type="success"
      :closable="false"
    />
    <el-divider content-position="left">使用 Hooks 方式绑定权限</el-divider>
    <el-row class="mb20">
      <el-button v-if="BUTTONS['auth:button:add']" type="primary" :icon="CirclePlus">
        新增
      </el-button>
      <el-button v-if="BUTTONS['auth:button:edit']" type="warning" :icon="EditPen">
        编辑
      </el-button>
      <el-button v-if="BUTTONS['auth:button:delete']" type="danger" plain :icon="Delete">
        删除
      </el-button>
      <el-button v-if="BUTTONS['auth:button:view']" type="info" plain :icon="Upload">
        导入数据
      </el-button>
      <el-button v-if="BUTTONS['auth:button:view']" type="info" plain :icon="Download">
        导出数据
      </el-button>
    </el-row>
    <el-divider content-position="left">使用 v-auth 指令绑定单个权限</el-divider>
    <el-row class="mb20">
      <el-button v-auth="'auth:button:add'" type="primary" :icon="CirclePlus">
        新增
      </el-button>
      <el-button v-auth="'auth:button:edit'" type="warning" :icon="EditPen">
        编辑
      </el-button>
      <el-button v-auth="'auth:button:delete'" type="danger" plain :icon="Delete">
        删除
      </el-button>
      <el-button v-auth="'auth:button:view'" type="info" plain :icon="Upload">
        导入数据
      </el-button>
      <el-button v-auth="'auth:button:view'" type="info" plain :icon="Download">
        导出数据
      </el-button>
    </el-row>
    <el-divider content-position="left">使用 v-auth 指令绑定多个权限</el-divider>
    <el-row>
      <el-button
        v-auth="[
          'auth:button:add',
          'auth:button:edit',
          'auth:button:delete',
          'auth:button:view',
          'auth:button:view'
        ]"
        type="primary"
        :icon="CirclePlus"
      >
        新增
      </el-button>
      <el-button
        v-auth="[
          'auth:button:add',
          'auth:button:edit',
          'auth:button:delete',
          'auth:button:view',
          'auth:button:view'
        ]"
        type="warning"
        :icon="EditPen"
      >
        编辑
      </el-button>
      <el-button
        v-auth="[
          'auth:button:add',
          'auth:button:edit',
          'auth:button:delete',
          'auth:button:view',
          'auth:button:view'
        ]"
        type="danger"
        plain
        :icon="Delete"
      >
        删除
      </el-button>
      <el-button
        v-auth="[
          'auth:button:add',
          'auth:button:edit',
          'auth:button:delete',
          'auth:button:view',
          'auth:button:view'
        ]"
        type="info"
        plain
        :icon="Upload"
      >
        导入数据
      </el-button>
      <el-button
        v-auth="[
          'auth:button:add',
          'auth:button:edit',
          'auth:button:delete',
          'auth:button:view',
          'auth:button:view'
        ]"
        type="info"
        plain
        :icon="Download"
      >
        导出数据
      </el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="authButton">
import { useAuthButtons } from "@/hooks/useAuthButtons"
import { CirclePlus, Delete, EditPen, Download, Upload } from "@element-plus/icons-vue"

const { BUTTONS } = useAuthButtons()
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
